<?php get_header() ?>
<?php
$option = get_option('tvpresident_1_settings');
?>
<div id="content">
        <div class="ngangborder"></div>
        <div class="left-content" style="width:100%;">
          
          <div style="clear:both"></div>
          <div class="divlist">
                 <div class="divtitle" style="width: 874px;">Nation by area</div>
                  <div class="ngangborder"></div>
                  <div class="divcontent page">
                     <div class="map">
					  <a href="javascript:;" class="m-hcm" style="visibility:hidden;">Hồ Chí Minh</a>
					  <a href="javascript:;" class="m-hn" style="visibility:hidden;">Hà Nội</a>
					  <a href="javascript:;" class="m-dn" style="visibility:hidden;">Đà Nẵng</a>
					  <a href="javascript:;" class="m-ct" style="visibility:hidden;">Cần Thơ</a>
					  <a href="javascript:;" class="m-db">Khu vực Đông Bắc</a>
					  <a href="javascript:;" class="m-tb">Khu vực Tây Bắc</a>
					  <a href="javascript:;" class="m-sh">Khu vực Châu thổ Sông Hồng</a><br/>
					  <a href="javascript:;" class="m-btb">Khu vực Bắc Trung Bộ</a>
					  <a href="javascript:;" class="m-ntb">Khu vực Nam Trung Bộ</a>
					  <a href="javascript:;" class="m-tn">Khu vực Tây Nguyên</a>
					  <a href="javascript:;" class="m-dnb">Khu vực Đông Nam Bộ</a><br/>
					  <a href="javascript:;" class="m-scl">Khu vực Đồng Bằng Sông Cửu Long</a>
					  <div class="m-layer hidden"></div>
					  <img class="m-main hidden" src="<?php echo bloginfo('template_url'); ?>/img/map/map.png">
					  <img class="hidden" src="<?php echo bloginfo('template_url'); ?>/img/map/m-hcm.png">
					  <img class="hidden" src="<?php echo bloginfo('template_url'); ?>/img/map/m-hn.png">
					  <img class="hidden" src="<?php echo bloginfo('template_url'); ?>/img/map/m-dn.png">
					  <img class="hidden" src="<?php echo bloginfo('template_url'); ?>/img/map/m-ct.png">
					  <img class="hidden" src="<?php echo bloginfo('template_url'); ?>/img/map/m-db.png">
					  <img class="hidden" src="<?php echo bloginfo('template_url'); ?>/img/map/m-tb.png">
					  <img class="hidden" src="<?php echo bloginfo('template_url'); ?>/img/map/m-sh.png">
					  <img class="hidden" src="<?php echo bloginfo('template_url'); ?>/img/map/m-btb.png">
					  <img class="hidden" src="<?php echo bloginfo('template_url'); ?>/img/map/m-ntb.png">
					  <img class="hidden" src="<?php echo bloginfo('template_url'); ?>/img/map/m-tn.png">
					  <img class="hidden" src="<?php echo bloginfo('template_url'); ?>/img/map/m-dnb.png">
					  <img class="hidden" src="<?php echo bloginfo('template_url'); ?>/img/map/m-scl.png">
					  <canvas id="example" width="500" height="900"></canvas>
					  <div id="status"></div>
					  <input type="hidden" value="" id="redirect" />
					  <script type="text/javascript">
					    if(IE == true) {
					      $('.m-main').attr('src','<?php echo bloginfo('template_url'); ?>/img/map/map.png');
					      $('.m-main').removeClass('hidden');
					      $('#example').addClass('hidden');
					      $('.map .m-layer').removeClass('hidden');
					      $('.map a').hover(function(){
					        $('.m-layer').html('<img src="<?php echo bloginfo('template_url'); ?>/img/map/'+$(this).attr('class')+'.png">');
					        $('.content-map').css('display','none');
					        $('.c'+$(this).attr('class')).css('display','block');
					      },function(){});
					    } else {
					      var current = 'm-layer';
					      var prev = '';
					      var example = document.getElementById('example');
					      var context = example.getContext('2d');
					      drawMap('<?php echo bloginfo('template_url'); ?>/img/map/map.png', context, 'map');
					      $('#example').mousemove(function(e) {
					          var pos = findPos(this);
					          var x = e.pageX - pos.x;
					          var y = e.pageY - pos.y;
					          var coord = "x=" + x + ", y=" + y;
					          var c = this.getContext('2d');
					          var p = c.getImageData(x, y, 1, 1).data; 
					          var hex = "#" + ("000000" + rgbToHex(p[0], p[1], p[2])).slice(-6);
					          if(prev!=current){
					            drawMap('<?php echo bloginfo('template_url'); ?>/img/map/map.png', context, 'map');
					            prev = current;
					          }
					          if(hex == "#fea922"){
					            current = 'm-db';
					            drawMap('<?php echo bloginfo('template_url'); ?>/img/map/m-db.png', context, current);
					          } else if(hex == "#eedd00"){
					            current = 'm-tb';
					            drawMap('<?php echo bloginfo('template_url'); ?>/img/map/m-tb.png', context, current);
					          } else if(hex == "#fb6b70"){
					            current = 'm-sh';
					            drawMap('<?php echo bloginfo('template_url'); ?>/img/map/m-sh.png', context, current);
					          } else if(hex == "#00c900"){
					            current = 'm-btb';
					            drawMap('<?php echo bloginfo('template_url'); ?>/img/map/m-btb.png', context, current);
					          } else if(hex == "#00ddcc"){
					            current = 'm-ntb';
					            drawMap('<?php echo bloginfo('template_url'); ?>/img/map/m-ntb.png', context, current);
					          } else if(hex == "#2288ff"){
					            current = 'm-tn';
					            drawMap('<?php echo bloginfo('template_url'); ?>/img/map/m-tn.png', context, current);
					          } else if(hex == "#b923fc"){
					            current = 'm-dnb';
					            drawMap('<?php echo bloginfo('template_url'); ?>/img/map/m-dnb.png', context, current);
					          } else if(hex == "#fb24b8"){
					            current = 'm-scl';
					            drawMap('<?php echo bloginfo('template_url'); ?>/img/map/m-scl.png', context, current);
					          } 
					          $('.map a').css('color','black');
					          $('.map a').css('textDecoration','none');
					          $('.'+current).css('color','#61c168');
					          $('.'+current).css('textDecoration','underline');
					          $('#redirect').val($('.'+current).attr('href'));
					      });
					      $('.map a').hover(function(){
					          $('.map a').css('color','black');
					          $('.map a').css('textDecoration','none');
					          $(this).css('color','#61c168');
					          $(this).css('textDecoration','underline');
					          current = $(this).attr('class'); 
					          drawMap('<?php echo bloginfo('template_url'); ?>/img/map/map.png', context, 'map');
					          drawMap('<?php echo bloginfo('template_url'); ?>/img/map/'+current+'.png', context, current);
					        },function(){});
					      $('#example').live('click',function(){
					        //if($('#redirect').val()!='') document.location.href =  $('#redirect').val();
					      });
					    }
					    function drawMap(url, context, current){
					      var img = new Image();
					      img.src = url;
					      if(current!='map'){
						      $('.content-map').css('display','none');
						      $('.c'+current).css('display','block');
						  }
					      var canvas = document.getElementById('example');
					      img.onload = function(){
					        context.drawImage(img,0,0);
					      };
					    }
					    function findPos(obj) {
					        var curleft = 0, curtop = 0;
					        if (obj.offsetParent) {
					            do {
					                curleft += obj.offsetLeft;
					                curtop += obj.offsetTop;
					            } while (obj = obj.offsetParent);
					            return { x: curleft, y: curtop };
					        }
					        return undefined;
					    }

					    function rgbToHex(r, g, b) {
					        if (r > 255 || g > 255 || b > 255)
					            throw "Invalid color component";
					        return ((r << 16) | (g << 8) | b).toString(16);
					    }
					  </script>
					</div>
				  	<?php 
			          $idObj = get_category_by_slug('ban-do');
			          $categories = get_categories(array('hide_empty'=>0, 'parent'=>$idObj->cat_ID));
			          foreach ($categories as $category) { ?>
			          <?php if($category->cat_ID!=1){ ?>
			          <?php $pos = 'detail-left'; 
			          if($category->slug=='m-db'||$category->slug=='m-sh'||$category->slug=='m-ntb') $pos = 'detail-right'; ?>
				 	  <div class="content-map <?php echo 'c'.$category->slug.' '.$pos; ?>">
			          	<h3><?php echo $category->cat_name; ?></h3>
			          	<div>
			          		<?php 
					        $children = get_categories(array('hide_empty'=>1, 'parent'=>$category->cat_ID));
			          		foreach ($children as $child) { ?>
			          			<a href="<?php echo get_category_link($child->cat_ID); ?>"><img src="<?php echo bloginfo('template_url'); ?>/img/province/<?php echo $child->slug; ?>.png" /></a>
					        <?php } ?>
			          	</div>
				  	  </div>
			          <?php } ?>
			        <?php } ?>
                  </div>
          </div>
         
        </div>
        <div style="clear:both"></div>
      </div>
      <div style="clear:both;"></div>
<?php get_footer() ?>